<template>
  <div>
    <div v-if="!showTag">
      <div class="app-main-content-box">
        <div class="app-main-top-box"><div class="title">会员标签</div></div>
      </div>
      <div class="empty">
        <el-empty description="标签功能未初始化, 请按提示继续进行"><el-button type="primary" round @click="openDialogUpdateTagGroup('add')">新标签组</el-button></el-empty>
      </div>
    </div>
    <div v-else class="vip-tag">
      <!-- page选择 -->
      <div class="left fl">
        <div class="btn-group flex-x-center-center">
          <el-button type="primary" size="small" round class="btn-add" @click="openDialogUpdateTag('add')">新标签</el-button>
          <el-button size="small" round class="btn-add" @click="openDialogUpdateTagGroup('add')">新标签组</el-button>
        </div>
        <div class="page-tree-container">
          <el-scrollbar style="height:100%" class="hid-scrollbar-x">
            <el-tree
              ref="tree"
              v-loading="treeLoading"
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node flex-x-between-center">
                <span class="Tag">
                  <i v-if="data.tags" class="el-icon-folder-opened" />
                  <i v-else class="el-icon-price-tag" />
                  {{ node.label }}
                </span>
                <span>
                  <el-button class="button" type="text" size="mini" @click="() => openDialogUpdateTag('add', { groupId: data.id })">
                    <i v-if="data.tags" class="el-icon-circle-plus-outline" />
                  </el-button>
                  <el-button class="button" type="text" size="mini" @click="() => edit(data)"><i class="el-icon-edit" /></el-button>
                  <el-button class="button" type="text" size="mini" @click="() => remove(data)"><i class="el-icon-delete" style="color: #fa5151" /></el-button>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <!--  标签详情  -->
      <div class="right">
        <div v-if="detailType === 'tag'" class="container">
          <div class="page-main-container">
            <div class="button-group">
              <app-main-title :title="(tagsDetail.tag && tagsDetail.tag.tagName) || ''" style="line-height: 40px" />
              <el-button size="small " round class="btn-add" @click="openDialogUpdateTag('update', tagsDetail.tag)">编辑标签</el-button>
              <el-button
                v-if="!$store.getters.banBtnList.includes('MCH_BTN_MEMBER_TAGS_EDIT')"
                size="small"
                round
                class="btn-add"
                @click="openDialogVipSign(tagsDetail.tag.id)"
              >
                标记会员
              </el-button>
              <el-button v-if="!$store.getters.banBtnList.includes('MCH_BTN_MEMBER_TAGS_EDIT')" size="small" round class="btn-add" @click="goVipModifyAccount">
                批量标记
              </el-button>
            </div>
            <div class="message-group">
              <div class="message-box">
                <div class="message-title">
                  <span>标签会员数</span>
                  <span style="cursor: pointer" @click="goVipList(tagsDetail, 'one')">查看会员 ></span>
                </div>
                <div class="message-num">{{ tagsDetail.memberCount || 0 }}</div>
              </div>
              <div class="message-box">
                <div class="message-title">
                  <span>所属组会员数</span>
                  <span style="cursor: pointer" @click="goVipList(tagsDetail, 'all')">查看会员 ></span>
                </div>
                <div class="message-num">{{ tagsDetail.groupMemberCount || 0 }}</div>
              </div>
              <div class="message-box">
                <div class="message-title"><span>组占比</span></div>
                <div class="message-num">{{ Math.round((tagsDetail.memberCount / tagsDetail.groupMemberCount) * 100 * 100) / 100 || 0 }}%</div>
              </div>
              <div class="message-box">
                <div class="message-title"><span>所有会员占比</span></div>
                <div class="message-num">{{ Math.round(((tagsDetail.memberCount * 100) / tagsDetail.allMemberCount) * 100) / 100 || 0 }}%</div>
              </div>
              <!--              <div class="message-box">-->
              <!--                <div class="message-title">-->
              <!--                  <span>自动更新时效</span>-->
              <!--                </div>-->
              <!--                <div class="message-num">每{{ 7 }}天</div>-->
              <!--              </div>-->
            </div>
            <!--            <div class="rule">-->
            <!--              <app-main-title title="自动添加规则" style="line-height: 40px"/>-->
            <!--              <el-button size="small" round class="btn-add" @click="openDialogUpdateRule('add')">修改</el-button>-->
            <!--            </div>-->
            <!--            <div class="rule-tip">符合以下任意一条规则系统将会自动给会员添加标签。</div>-->
            <!--            <el-table-->
            <!--              v-loading="tableLoading"-->
            <!--              :data="addRule"-->
            <!--              border-->
            <!--              style="width: 720px"-->
            <!--              size="small"-->
            <!--              element-loading-text="加载中"-->
            <!--              empty-text="暂无数据"-->
            <!--            >-->
            <!--              <el-table-column label="序号" width="75" align="center">-->
            <!--                <template slot-scope="scope">-->
            <!--                  {{ scope.$index+1 }}-->
            <!--                </template>-->
            <!--              </el-table-column>-->
            <!--              <el-table-column prop="type" label="条件类型" width="120"/>-->
            <!--              <el-table-column prop="detail" label="说明" width="400"/>-->
            <!--              <el-table-column label="操作">-->
            <!--                <template slot-scope="scope">-->
            <!--                  <span style="color: #039D12">添加标签</span>-->
            <!--                </template>-->
            <!--              </el-table-column>-->
            <!--            </el-table>-->
            <!--            <div class="rule">-->
            <!--              <app-main-title title="自动移除规则" style="line-height: 40px"/>-->
            <!--              <el-button size="small" round class="btn-add" @click="openDialogUpdateRule('del')">修改</el-button>-->
            <!--            </div>-->
            <!--            <div class="rule-tip">符合以下任意一条规则系统将会自动给会员移除标签。</div>-->
            <!--            <el-table-->
            <!--              v-loading="tableLoading"-->
            <!--              :data="delRule"-->
            <!--              border-->
            <!--              style="width: 720px"-->
            <!--              size="small"-->
            <!--              element-loading-text="加载中"-->
            <!--              empty-text="暂无数据"-->
            <!--            >-->
            <!--              <el-table-column label="序号" width="75" align="center">-->
            <!--                <template slot-scope="scope">-->
            <!--                  {{ scope.$index+1 }}-->
            <!--                </template>-->
            <!--              </el-table-column>-->
            <!--              <el-table-column prop="type" label="条件类型" width="120"/>-->
            <!--              <el-table-column prop="detail" label="说明" width="400"/>-->
            <!--              <el-table-column label="操作">-->
            <!--                <template slot-scope="scope">-->
            <!--                  <span style="color: #D9001B">移除标签</span>-->
            <!--                </template>-->
            <!--              </el-table-column>-->
            <!--            </el-table>-->
          </div>
        </div>
        <!--  标签组详情-->
        <div v-if="detailType === 'group'" class="container">
          <div class="page-main-container">
            <div class="button-group">
              <app-main-title :title="groupData.tagName" style="line-height: 40px" />
              <el-button size="small " round class="btn-add" @click="openDialogUpdateTagGroup('update', groupData)">编辑标签组</el-button>
            </div>
            <div class="message-group">
              <div class="message-box">
                <div class="message-title"><span>标签数</span></div>
                <div class="message-num">{{ groupData.tags ? groupData.tags.length : 0 }}</div>
                <div class="message-img" style="width: 59px; height: 75px;"><img src="../../../../public/static/img/vip-label/msg01.png"></div>
              </div>

              <div class="message-box">
                <div class="message-title">
                  <span>会员数</span>
                  <span style="cursor: pointer; color: #ffb72f; " @click="goVipList(groupData.tags, 'group')">查看会员 ></span>
                </div>
                <div class="message-num">{{ tagsDetail.groupMemberCount || 0 }}</div>
                <div class="message-img" style="width: 70px; height: 62px;"><img src="../../../../public/static/img/vip-label/msg02.png"></div>
              </div>
              <div class="message-box">
                <div class="message-title"><span>所有会员占比</span></div>
                <div class="message-num">{{ Math.round(((tagsDetail.groupMemberCount * 100) / tagsDetail.allMemberCount) * 100) / 100 || 0 }}%</div>
                <div class="message-img" style="width: 74px; height: 73px;"><img src="../../../../public/static/img/vip-label/msg03.png"></div>
              </div>
            </div>
            <div class="rule"><app-main-title title="组内标签" style="line-height: 40px" /></div>
            <div v-if="groupData.tags ? groupData.tags.length : ''">
              <div class="rule-tip">以下为该标签组内的标签信息</div>
              <el-table v-loading="tableLoading" :data="groupData.tags" border style="width: 900px" size="small" element-loading-text="加载中">
                <el-table-column label="序号" width="75" align="center">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="tagName" label="标签" width="120" />
                <el-table-column prop="detail" label="是否开放" width="200">
                  <template slot-scope="scope">
                    {{ scope.row.visible ? '开放' : '不公开' }}
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="300">
                  <template slot-scope="scope">
                    {{ scope.row.remark || '/' }}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button type="text" @click="enterTag(scope.row)">进入</el-button>
                      <el-button type="text" @click="openDialogUpdateTag('update', scope.row)">编辑</el-button>
                      <el-button type="text" @click="remove(scope.row)">删除</el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else class="empty">
              <el-empty description="这个组还没有标签数据, 请按提示操作后继续">
                <el-button type="primary" round @click="openDialogUpdateTag('add', { groupId: groupData.id })">添加一个标签</el-button>
              </el-empty>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加标签组 -->
    <dialog-update-label-group ref="dialogUpdateTagGroup" />

    <!-- 添加 / 编辑标签 -->
    <dialog-update-label ref="dialogUpdateTag" />

    <!-- 标记会员 -->
    <dialog-vip-sign ref="dialogVipSign" />

    <!-- 添加 / 编辑规则 -->
    <dialog-update-rule ref="dialogUpdateRule" />
  </div>
</template>

<script>
import DialogUpdateLabel from './components/DialogUpdateLabel'
import DialogUpdateLabelGroup from './components/DialogUpdateLabelGroup'
import DialogVipSign from './components/DialogVipSign'
import DialogUpdateRule from './components/DialogUpdateRule'
import { getTagsList, getTagsDetail, delTag, delTagGroup } from '@/api/vip'
export default {
  components: {
    DialogUpdateLabel,
    DialogUpdateLabelGroup,
    DialogVipSign,
    DialogUpdateRule
  },
  data() {
    return {
      // 配置
      // 状态
      showTag: false, // 是否有标签展示
      RuleType: 'add', // 规则弹窗默认类型
      treeLoading: false, // 树状loading
      tableLoading: false, // 表格loading
      searchLoading: false, // 搜索loading
      // 数据
      data: [],
      tagsDetail: {}, // 标签详情
      groupData: {}, // 标签组内容
      detailType: 'group', // 右边详情类型
      addRule: [], // 添加规则
      delRule: [], // 删除规则
      defaultProps: {
        children: 'tags',
        label: 'tagName'
      }
    }
  },
  created() {
    this.getTagList()
  },
  mounted() {},
  methods: {
    /**
		 * 数据组
		 */
    // 获取标签组树形信息
    getTagList() {
      this.data = []
      this.treeLoading = true
      getTagsList().then(res => {
        if (res.data.length) {
          this.showTag = true
          res.data.forEach(e => {
            this.data.push({ id: e.groupId, tagName: e.tagGroup, tags: e.tags })
          })
          this.detailType = 'group'
          this.groupData = this.data[0]
          this.$nextTick(() => {
            if (this.groupData.tags.length) {
              this.initData(this.groupData.tags[0].id)
            }
            // 默认选中第一个
            const firstNode = document.querySelector('.el-tree-node')
            firstNode.click()
          })
          this.treeLoading = false
        } else {
          this.showTag = false
          this.treeLoading = false
        }
      })
    },
    // 获取标签详情数据
    initData(id) {
      getTagsDetail({ tagId: id }).then(res => {
        this.tagsDetail = res.data
      })
    },
    /**
		 * 按钮组
		 */
    // 添加、编辑、移除标签
    openDialogUpdateTag(type, tagDetail = {}) {
      this.$refs.dialogUpdateTag.open(tagDetail.id ? tagDetail : tagDetail.groupId ? { groupId: tagDetail.groupId } : {}, type).then(() => {
        // 刷新页面数据
        this.getTagList()
      })
    },

    // 添加、编辑、移除标签组
    openDialogUpdateTagGroup(type, tagDetail = {}) {
      this.$refs.dialogUpdateTagGroup.open(type, tagDetail).then(() => {
        // 刷新页面数据
        this.getTagList()
      })
    },

    // 树状菜单修改按钮
    edit(data) {
      if (data.tags) {
        this.openDialogUpdateTagGroup('update', data)
      } else {
        this.openDialogUpdateTag('update', data)
      }
    },

    // 树状菜单删除按钮
    remove(data) {
      if (data.tags) {
        this.del(data.id, 'group', data.tagName)
      } else {
        this.del(data.id, 'tag', data.tagName)
      }
    },

    // 从标签组进入到标签详情页面
    enterTag(data) {
      this.detailType = 'tag'
      this.initData(data.id)
      this.$refs.tree.setCurrentKey(data.id)
    },

    // 标记会员
    openDialogVipSign(id) {
      this.$refs.dialogVipSign.open(id).then(() => {
        this.initData(id)
      })
    },

    // 跳转批量调整
    goVipModifyAccount() {
      this.$router.push({
        name: 'VipList',
        params: { name: 'modifyForm' }
      })
    },

    goVipList(data, type) {
      console.log(data)
      const tagId = []
      // 组会员查询
      if (type === 'group') {
        data.forEach(e => tagId.push(e.id))
      } else if (type === 'one') {
        tagId.push(data.tag.id)
      } else if (type === 'all') {
        const tagGroup = this.data.filter(e => e.id === data.tag.groupId)
        if (tagGroup.length) tagGroup[0].tags.forEach(e => tagId.push(e.id))
      }
      this.$router.push({
        name: 'VipList',
        params: { tagId }
      })
    },

    // 添加、移除规则
    openDialogUpdateRule(type) {
      this.RuleType = type
      this.$refs.dialogUpdateRule.open()
    },
    /**
		 * 状态组
		 */
    handleNodeClick(data) {
      if (data.tags) {
        this.detailType = 'group'
        this.groupData = data
        this.tagsDetail = {
          memberCount: null,
          groupMemberCount: null,
          allMemberCount: null
        }
        if (data.tags.length) {
          this.initData(data.tags[0].id)
        }
      } else {
        this.detailType = 'tag'
        this.initData(data.id)
      }
    },
    /**
		 * 方法组
		 */
    del(id, type, tagName) {
      if (type === 'group') {
        console.log(id)
        this.$prompt(`检测到你正在删除标签组<span style="color: #fa5151">${tagName}</span>，此操作将会自动删除该标签组下的所有标签且数据不可逆！`, '提示', {
          confirmButtonText: '确定删除',
          showCancelButton: false,
          type: 'warning',
          dangerouslyUseHTMLString: true,
          inputPlaceholder: '请输入标签组名称确认',
          inputValidator: val => {
            if (val !== tagName) {
              return '标签组名不相符'
            }
          }
        })
          .then(() => {
            this.delGroupSubmit(id)
          })
          .catch(() => {})
      } else {
        this.$prompt(`检查到你正在删除标签<span style="color: #fa5151">${tagName}</span>，删除标签后该标签标记将自动从所有已标记会员的标签列表中消失。`, '提示', {
          confirmButtonText: '确定删除',
          showCancelButton: false,
          type: 'warning',
          dangerouslyUseHTMLString: true,
          inputPlaceholder: '请输入标签名称确认',
          inputValidator: val => {
            if (val !== tagName) {
              return '标签名不相符'
            }
          }
        })
          .then(() => {
            this.delTagSubmit(id)
          })
          .catch(() => {})
      }
    },
    // 删除标签组
    delGroupSubmit(id) {
      this.dialogLoading = true
      delTagGroup(id)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.getTagList()
        })
        .finally(() => {
          this.dialogLoading = false
        })
    },
    // 删除标签
    delTagSubmit(id) {
      this.dialogLoading = true
      delTag(id)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.getTagList()
        })
        .finally(() => {
          this.dialogLoading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 页面  */
.empty {
	height: 100%;
	width: 100%;
	background-color: #fff;
}
.vip-tag {
	.left {
		width: 340px;
		background-color: #fff;
		padding: 20px 20px;
		.page-tree-container {
			height: calc(100vh - 240px);
			.custom-tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.Tag {
					font-size: 14px;
					margin-bottom: 4px;
				}

				.button {
					visibility: hidden;
				}

				&:hover .button {
					visibility: visible;
				}
			}
		}
		.btn-add {
			height: 40px;
			width: 140px;
			margin-bottom: 40px;
			font-size: 14px;
			padding: 12px 20px;
		}
	}
	.right {
		overflow: hidden;
		.page-main-container {
			padding: 20px 30px;
			box-sizing: border-box;
			background-color: #fff;
			height: calc(100vh - 120px);
			.button-group {
				display: flex;
				.btn-add {
					height: 40px;
					width: 110px;
					margin-left: 30px;
				}
			}

			.message-group {
				display: flex;

				.message-box {
					height: 150px;
					min-width: 275px;
					background-color: white;
					margin-right: 20px;
					border: 1px solid #EFEFEF;

					.message-title {
						font-size: 16px;
						color: #333;

						span {
							margin: 18px;
						}
					}

					.message-num {
						font-size: 50px;
						font-weight: bolder;
						margin-left: 18px;
						float: left;
					}
					.message-img {
						float: right;
						margin-right: 18px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.rule {
				margin-top: 40px;
				display: flex;

				.btn-add {
					height: 40px;
					width: 80px;
					margin-left: 30px;
					font-size: 14px;
					padding: 12px 20px;
				}
			}

			.rule-tip {
				color: #555;
				font-size: 14px;
				margin-bottom: 30px;
			}
		}
		.container {
			margin-left: 10px;
		}
	}
}
</style>
